<template>
  <div class="news">
      <div v-for="item,i in news" :key="i" class="onenews">
           <div class="title">{{item.title}}</div>
           <div class="time">{{item.time}}</div>
      </div>
  </div>
</template>
<script>
export default {
    props:['news']
};
</script>
<style scoped>
.news{
  width: 80%;
  margin: 2em auto;
  display: grid;    
  grid-template-columns: 1fr 1fr 1fr; 
  grid-gap: 4em;  
}
.onenews{
  padding: 2em 2em 1em 2em;
  border: 1px solid #d39797;
  cursor: pointer;
}
.onenews:hover{
  color: #94070a;
  font-size: 1.2em;
  font-weight: bold;
  border: 2px solid #94070a;
}
.time{
  margin-top: 1em;
  text-align: right;
}
</style>